<template>
    <div class="">
        <el-dialog
                :title="title"
                :visible.sync="dialogFormVisible"
                width="55%"
                :close-on-click-modal="false"
                @close="close"
        >
          <div class="">
            <el-form ref="form" :model="form" label-width="120px">
              <div class="flex-bet flex-y-top">
                <div class="bflex-4">
                  <div class="shuju_title">
                    <div class="shuju_title_text">
                      <span>订单信息</span>
                    </div>
                  </div>
                  <div class="formBox">
                    <div class="flex pad_lr_10 bor_b_df5 lh40">
                      <div class="seeLeft">订单类型：</div>
                      <div>
                        <span><el-tag size="mini" type="success">预约订单</el-tag></span>
                      </div>
                    </div>
                    <div class="flex pad_lr_10 bor_b_df5 lh40">
                      <div class="seeLeft">订单号：{{orderDetail.outTradeNo}}</div>
                      <div></div>
                    </div>
                    <div class="flex pad_lr_10 bor_b_df5 lh40">
                      <div class="seeLeft">提交时间：</div>
                      <div>{{ orderDetail.createdAt }}</div>
                    </div>
                    <div class="flex pad_lr_10 bor_b_df5 lh40">
                      <div class="seeLeft">订单渠道：</div>
                      <div>
                        <span v-if="orderDetail.origin=='1'"><el-tag size="mini" type="success">微信小程序</el-tag></span>
                        <span v-if="orderDetail.origin=='2'"><el-tag size="mini" type="success">微信公众号</el-tag></span>
                        <span v-if="orderDetail.origin=='3'"><el-tag size="mini" type="success">支付宝小程序</el-tag></span>
                        <span v-if="orderDetail.origin=='4'"><el-tag size="mini" type="success">百度小程序</el-tag></span>
                        <span v-if="orderDetail.origin=='5'"><el-tag size="mini" type="success">H5</el-tag></span>
                        <span v-if="orderDetail.origin=='6'"><el-tag size="mini" type="success">PC</el-tag></span>
                        <span v-if="orderDetail.origin=='7'"><el-tag size="mini" type="success">头条小程序</el-tag></span>
                      </div>
                    </div>
                    <div class="flex pad_lr_10 bor_b_df5 lh40">
                      <div class="seeLeft">用户信息：</div>
                      <div>{{ orderDetail.systemUserName }}（UID：{{ orderDetail.userId }}）</div>
                    </div>
                    <div class="flex pad_lr_10 bor_b_df5 lh40">
                      <div class="seeLeft">订单状态：</div>
                      <div class="flex flex-center">
                        <div>
                          <div v-if="orderDetail.state=='1'"><el-tag size="mini">待确认</el-tag></div>
                          <div v-if="orderDetail.state=='2'"><el-tag size="mini" type="info">待确认</el-tag></div>
                          <div v-if="orderDetail.state=='3'"><el-tag size="mini" type="success">预约通过</el-tag></div>
                          <div v-if="orderDetail.state=='4'"><el-tag size="mini" type="danger">已拒绝</el-tag></div>
                          <div v-if="orderDetail.state=='5'"><el-tag size="mini" type="info">已核销</el-tag></div>
                          <div v-if="orderDetail.state=='6'"><el-tag size="mini" type="info">已取消</el-tag></div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="bflex-6 mar_l20">
                  <div class="shuju_title">
                    <div class="shuju_title_text">
                      <span>预约详情</span>
                    </div>
                  </div>
                  <div class="formBox">
                    <div class="flex pad_lr_10 bor_b_df5 lh40">
                      <div class="seeLeft">联系人：{{orderDetail.userName}} / {{orderDetail.sex}}</div>
                      <div></div>
                    </div>
                    <div class="flex pad_lr_10 bor_b_df5 lh40">
                      <div class="seeLeft">预留电话：{{orderDetail.userTel}}</div>
                      <div></div>
                    </div>
                    <div class="flex pad_lr_10 bor_b_df5 lh40">
                      <div class="seeLeft">预约位置：</div>
                      <div class="">{{ orderDetail.regionName }}</div>
                    </div>
                    <div class="flex pad_lr_10 bor_b_df5 lh40">
                      <div class="seeLeft">就餐人数：</div>
                      <div class="">{{ orderDetail.people }}</div>
                    </div>
                    <div class="flex pad_lr_10 bor_b_df5 lh40">
                      <div class="seeLeft">到店时间：</div>
                      <div class="color-red">{{ orderDetail.serviceDay }} {{ orderDetail.serviceTime }}</div>
                    </div>
                    <div class="flex pad_lr_10 bor_b_df5 lh40">
                      <div class="seeLeft">预付定金：</div>
                      <div class="flex">{{ orderDetail.money }} (
                        <div v-if="orderDetail.payMode=='1'">微信支付</div>
                        <div v-if="orderDetail.payMode=='2'">支付宝支付</div>
                        <div v-if="orderDetail.payMode=='3'">百度支付</div>
                        <div v-if="orderDetail.payMode=='4'">微信支付</div>
                        <div v-if="orderDetail.payMode=='5'">余额支付</div>
                        <div v-if="orderDetail.payMode=='0'">--</div>)
                      </div>
                    </div>
                    <div class="flex pad_lr_10 bor_b_df5 lh40">
                      <div class="seeLeft">订单备注：{{orderDetail.note || '无'}}</div>
                      <div></div>
                    </div>
                  </div>
                </div>
              </div>
            </el-form>
          </div>
            <div slot="footer" class="dialog-footer">
                <el-button size="medium" @click="close">取 消</el-button>
                <el-button size="medium" type="primary" @click="save">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        name: "goodlistedit",
        created() {
        },
        data() {
            return {
                form: {
                    id:'',
                    sort: "1",
                    name: "",
                    min: "",
                    max: "",
                    minute: "",
                },
                orderDetail: {},
                title: "",
                type: 1,
                dialogFormVisible: false,
                qjjl:[],
                qjjl2:[],
            }
        },
        components: {
        },
        methods: {
            async showEdit(row) {
                if (!row) {
                    this.title = "添加";
                } else {
                    this.title = "预约记录";
                  // this.form = data
                    this.orderDetail = Object.assign({}, row);
                }
                this.dialogFormVisible = true;
            },
            close() {
                this.dialogFormVisible = false;
            },
            setStoreId(storeId){
              this.form.storeId = storeId
            },
            save() {
              this.dialogFormVisible = false;
            },
        }
    };
</script>
